@extends('Admin.base')
@section('style')
    <style>
        .statistics-body{
            display: block;
            padding: 10px 15px;
            background-color: #f8f8f8;
            color: #999;
            border-radius: 2px;
            -webkit-transition: all .3s;
        }
        .statistics-body p cite{
            font-style: normal;
            font-size: 30px;
            font-weight: 300;
            color: #009688;
        }
    </style>
@endsection
@section('content')
    <div class="layui-card">
        <div class="layui-card-header layuiadmin-card-header-auto">
            <div>
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>{{'余额变动查询'}}</legend>
                </fieldset>
            </div>
            <div class="layui-form" style="margin-top:30px;">
                <div class="layui-form-item layui-row">
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div style="margin: auto 10px;">
                            <input type="text" name="keyword" placeholder="用户昵称、手机号码、ID、姓名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <button class="layui-btn" lay-submit lay-filter="LAY-search" style="float: left">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                        </button>
                        <button class="layui-btn" lay-submit lay-filter="LAY-export" style="float: right;">
                            导出
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-card-body">
            <table id="LAY-table" lay-filter="LAY-table"></table>
        </div>
    </div>
@endsection
@section('script')
    <script src="/js/ajax.js"></script>
    <script>
        layui.use(['form', 'table','laydate'], function(){
            var $ = layui.$
                ,form = layui.form
                ,table = layui.table
                ,laydate = layui.laydate;

            laydate.render({
                elem: '#time-range'
                ,type: 'date'
                ,range: true //或 range: '~' 来自定义分割字符
            });

            table.render({
                elem: '#LAY-table'
                ,url: "{{route('balanceChange.table')}}"
                ,method: "post"
                ,page: true //开启分页
                ,limit:30
                ,cols: [[
                    {field: 'created_at', title: '变动时间', align:'center', width: 180}
                    ,{field: 'type', title: '变动类型', align:'center', width: 200}
                    , {
                        field: 'avatar', title: '头像', templet: function (d) {
                            return '<img src="' + d.avatar + '" />'
                        }
                    }
                    ,{field: '', title: '会员信息',align:'left',templet:function(d){
                        var Html = "<div>";
                        Html += 'ID：' + d.number;
                        Html += '<br/>';
                        Html += '姓名：' + d.realname;
                        Html += '<br/>';
                        Html += '电话：' + d.phone;
                        Html += '<br/>';
                        Html += '昵称：' + d.nickname;
                        Html += '</div>';
                        return Html;
                        }}
                    ,{field: 'money', title: '变动金额', align:'center', width: 220}
                    ,{field: 'balance', title: '变动后余额', align:'center', width: 220}
                    ,{field: 'trade_no', title: '订单编号', align:'center', width: 300}
                ]]
            });
            //监听搜索
            form.on('submit(LAY-search)', function(data){
                var field = data.field;
                //执行重载
                table.reload('LAY-table', {
                    where: field,page: {curr: 1}
                });
            });

            form.on('submit(LAY-export)', function(data){
                var field = data.field;
                layer.prompt({
                    formType: 0,
                    value: '',
                    title: '请输入文件名称',
                    btn:['导出','取消']
                }, function(value, index, elem){
                    if(value == '' || value == undefined){
                        layer.msg('请输入文件名称');
                    }else{
                        field.filename = value;
                        $.ajax({
                            url: "{{route('balanceChange.export')}}"
                            , type: 'POST'
                            , dataType: 'json'
                            , data: field
                            , success: function (ret) {
                                if (ret.hasOwnProperty('code') && ret.code == 200) {
                                    layer.msg(ret.message,{icon: 1,time:2000});
                                    return false;
                                }
                                layer.msg(ret.message,{icon:2});
                            }
                        });
                        layer.close(index);
                    }

                });

            });

        });
    </script>

@endsection